<template>
  <div v-loading="loading" class="common_content">
    <div v-if="registerList.length > 0">
      <div v-for="item in registerList" :key="item.id">
        <div v-if="item.registerTagTypeCode === 'Coach' || item.registerTagTypeCode === 'Leader' || item.registerTagTypeCode === 'Athlete' || item.registerTagTypeCode === 'HeadQuarters'">
          <div>
            <span class="gl_pr_20">{{ item.registerTagType.name }}身份认证</span>
            <el-button size="mini" type="primary" @click="add(item.id)">新增</el-button>
          </div>
          <el-row>
            <el-col v-if="item.registerTagDetails.length < 1" :span="8">
              <peopleList :people-data="addInput" :tag-id="item.id" />
            </el-col>
            <el-col v-for="(ktem, kndex) in item.registerTagDetails" v-else :key="kndex" :span="8">
              <peopleList :people-data="ktem" :tag-id="item.id" :number="kndex + 1" />
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div v-else class="gl_noData">
      <p>暂无需要认证的标签</p>
    </div>
    <Dialog ref="dialog" :people-data="addInput" :title="title" :tag-id="tagId" />
  </div>
</template>
<script>
import Dialog from './dialog.vue';
import { mapState } from 'vuex';
import peopleList from './peopleList';
import {
  api_GET_EventsManagementRegisterTagRegisterTagListRegisterId
} from '@/extend/api/gameswaggerApi/app.js';
import {
  SiSTKWEventsManagementAddRegisterTagDetailInput
} from '@/lib/form/game/swaggerForm';
export default {
  name: 'Main',
  components: {
    peopleList,
    Dialog
  },
  data () {
    return {
      loading: false,
      registerList: [],
      addInput: new SiSTKWEventsManagementAddRegisterTagDetailInput(),
      title: '新增证书',
      registerId: '',
      tagId: ''
    };
  },
  computed: {
    ...mapState({
      currentUserType: state => state.user.currentUserType
    })
  },
  watch: {
    'currentUserType': {
      handler: function(val) {
        if (val) {
          this.registerId = val.registerId;
          this.getRegisterList();
        }
      },
      immediate: true
    }
  },
  created() {
    this.getRegisterList();
  },
  methods: {
    // 获取角色列表
    getRegisterList() {
      if (!(this.currentUserType && this.currentUserType.registerId)) return;
      this.loading = true;
      api_GET_EventsManagementRegisterTagRegisterTagListRegisterId(this.registerId).then(res => {
        this.loading = false;
        this.registerList = res || [];
        // this.registerList = this.registerList.filter(item => {
        //   return item.registerTagTypeCode !== 'Athlete';
        // });
      });
    },
    // 新增
    add(id) {
      this.tagId = id;
      this.$refs.dialog.open();
    }
  }
};
</script>
<style scoped>
.common_title{
  height:50px;
  line-height: 50px;
  border-bottom:1px solid #000;
}
.common_content{
  padding: 15px 10px;
}
.upload_game_img {
  margin-top:12px;
  width: 291px;
  height: 183px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 20px;
  background: rgba(0,0,0,0.02);
  border: 1px dashed rgba(0,0, 0, 0.15);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 4px;
}
.upload_game_img:hover {
  border-color: #409eff;
}
.upload_game_img .show_img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 4px;
}
.item_list{
  float: left;
  margin-right:22px;
  margin-bottom:30px;
}
</style>
